<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JM航空会员注册</title>
    <link rel="stylesheet" href="static/element-ui/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="static/css/register.css">
    <link rel="stylesheet" href="static/font/css/font-awesome.min.css"/>
</head>
<body>
<div id="appReg">
    <el-menu mode="horizontal" :default-active="activeIndex" active-text-color="#409EFF">
        <el-menu-item index="0" id="logo">JM航空&nbsp;&nbsp;&nbsp; <span
                class="fa fa-plane fa-2x"></span></el-menu-item>
        <el-menu-item index="1"><a href="index.html">航班查询</a></el-menu-item>
        <el-menu-item id="user" index="2">
            <img class="el-tooltip" src="static/image/flag.png"/>
            <a href="logout">登陆</a>
        </el-menu-item>
    </el-menu>

    <div id="main">
        <el-col>
            <el-card shadow="always">
                <el-steps :active="activeStep" finish-status="success" simple
                          style="margin-top:20px;margin-left:20%;margin-right:20%;">
                    <el-step title="基本信息"></el-step>
                    <el-step title="联系信息"></el-step>
                    <el-step title="注册成功"></el-step>
                </el-steps>

                <!-- 表单1-->
                <el-form :model="userInfo1" :rules="rules1" ref="userInfo1" label-width="150px" status-icon
                         class="inputForm" v-show="activeStep==0">
                    <el-form-item label="中文姓名" prop="userChname" required>
                        <el-input v-model="userInfo1.userChname"></el-input>
                    </el-form-item>
                    <el-form-item label="拼音/英文姓名" prop="userEnname" required>
                        <el-input v-model="userInfo1.userEnname"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证件" required>
                        <el-row type="flex">
                            <el-col :span="8">
                                <el-form-item prop="userCerType">
                                    <el-select placeholder="请选择证件类型" v-model="userInfo1.userCerType">
                                        <el-option v-for="item in types"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2" style="width: 20px">&nbsp;&nbsp;-&nbsp;&nbsp;</el-col>
                            <el-col :span="15">
                                <el-form-item prop="userCerid">
                                    <el-input v-model="userInfo1.userCerid"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="注册同意条件" show-message prop="commit">
                        <el-radio-group v-model="commit">
                            <el-radio label='1'>我同意遵守JM航空会员手册的条款与条件
                                请您认真查看JM航空会相关规定!
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-row style="margin-top: 50px">
                        <el-button type="primary" icon="el-icon-arrow-right el-icon--right" style="float: right"
                                   @click="stepNext('userInfo1')">
                            下一步</i>
                        </el-button>
                    </el-row>
                </el-form>

                <!-- 表单2 :rules="rules2" -->
                <el-form :model="userInfo2" :rules="rules2" ref="userInfo2" label-width="150px" status-icon
                         class="inputForm" v-show="activeStep==1">
                    <el-form-item label="手机号码" prop="userTel">
                        <el-input v-model="userInfo2.userTel"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="userPass" autocomplete="off">
                        <el-input type="password" v-model="userInfo2.userPass"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass" autocomplete="off">
                        <el-input type="password" v-model="userInfo2.checkPass"></el-input>
                    </el-form-item>
                    <el-row style="margin-top: 50px">
                        <el-button type="primary" icon="el-icon-arrow-left el-icon--left" style="margin-left: 20%"
                                   @click="stepPrev()">
                            上一步</i>
                        </el-button>
                        <el-button type="primary" icon="el-icon-arrow-right el-icon--right" style="float: right"
                                   @click="stepNext('userInfo2')">
                            下一步</i>
                        </el-button>
                    </el-row>
                </el-form>

                <el-row type="flex" :gutter="20" style="margin-top: 100px;margin-left: 20%;margin-right: 30%;"
                        v-show="activeStep==2">
                    <el-col :span="10">

                    </el-col>
                    <el-col :span="10">
                        <el-button type="primary" plain><a href="index.html">返回首页</a></el-button>
                    </el-col>
                    <el-col :span="10">
                        <el-button type="success" plain>关于我</el-button>
                    </el-col>
                </el-row>

            </el-card>
        </el-col>
    </div>

</div>
</body>
<script type="text/javascript" src="static/vue/vue.js"></script>
<script type="text/javascript" src="static/element-ui/lib/index.js"></script>
<script type="text/javascript" src="static/vue/vue-resource.js"></script>
<script type="text/javascript" src="static/js/register.js"></script>
</html>